<!doctype html>
<html lang="ch">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="大数据管理平台">
    <meta name="keywords" content="大数据管理平台 大数据">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>大数据管理平台</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/slide.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/flat-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery.nouislider.css">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div id="wrap">
    <!-- 左侧菜单栏目块 -->
    <div class="leftMeun" id="leftMeun">
        <div id="logoDiv">
            <p id="logoP">
                <img id="logo" alt="大数据管理平台" src="images/logo.png"> <span>
						大数据管理平台 </span>
            </p>
        </div>
        <div class="meun-item meun-item-active" href="#sour"
             aria-controls="sour" role="tab" data-toggle="tab">
            <img src="images/icon_source.png"> 数据
        </div>
    </div>
    <!-- 右侧具体内容栏目 -->
    <div id="rightContent">
        <a class="toggle-btn" id="nimei"> <i
                class="glyphicon glyphicon-align-justify"> </i>
        </a>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="sour">
                <div class="check-div form-inline">
						<span style="padding-top: 15px; font-size: 24px"> <strong>
                            RDB数据导入Solr </strong>
						</span> <span
                        style="padding-top: 15px; font-size: 14px; padding-left: 15px;">
							<strong> 将RDB中数据导入到SolrCloud集群中。 </strong>
						</span>
                </div>
                <!--check-div-->
                <div class="data-div">
                    <div class="row tableHeader"></div>
                    <div class="tablebody">
                        <div class="row">
                            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                <span>输入Zookeeper信息（*）:</span>
                            </div>
                            <div
                                    class="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-group form-group-xs">
									<span><input type="text" class="form-control"
                                                 id="zkHosts" name="zkHosts" data-toggle="tooltip"
                                                 data-placement="top" title="设置Zookeeper信息"></span>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                <span id="msg1"> </span>
                            </div>
                        </div>
                        <div id="collapseSystem" class="collapse in" aria-expanded="true">
                            <div class="row">
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <span>索引名称（*）：</span>
                                </div>
                                <div
                                        class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
										<span><input type="text" class="form-control"
                                                     id="collectionName" name="collectionName"
                                                     data-toggle="tooltip" data-placement="top" title="索引名称"></span>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <span id="msg2"> </span>
                                </div>
                            </div>
                        </div>
                        <!--数据管理折叠狂-->
                        <div id="collapseAccount" class="collapse in"
                             aria-expanded="true">

                            <div class="row">
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <span>ConfigName（*）：</span>

                                </div>
                                <div
                                        class="col-lg-2 col-md-2 col-sm-2 col-xs-2 form-group form-group-xs">
										<span><input type="text" class="form-control"
                                                     id="configName" name="configName" data-toggle="tooltip"
                                                     data-placement="top" title="Zookeeper中已经存在的config name"></span>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <span id="msg3"> </span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <span>并发线程数：</span>
                                </div>
                                <div
                                        class="col-lg-2 col-md-2 col-sm-2 col-xs-2 form-group form-group-xs">
										<span><input type="text" class="form-control"
                                                     id="threadCount" name="threadCount" data-toggle="tooltip"
                                                     data-placement="top" title="设置index并发写线程数"></span>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <span id="msg4"> </span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <span>增量字段：</span>
                                </div>
                                <div
                                        class="col-lg-2 col-md-2 col-sm-2 col-xs-2 form-group form-group-xs">
										<span><input type="text" class="form-control"
                                                     id="updateCol" name="updateCol" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="设置用于数据增量的字段，例如代表时间戳的字段，如果未设置增量字段，将无法实现增量导入"></span>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <span id="msg5"> </span>
                                </div>
                            </div>
                            <div class="row" id="sql-row">
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <span> sql </span>
                                </div>
                                <div
                                        class="sql-row-content col-lg-5 col-md-5 col-sm-5 col-xs-5">
                                    <form method="post" action="save.php">
											<textarea id="sql" cols="40" rows="8" data-toggle="tooltip"
                                                      data-placement="top" title="导入SQL文，支持where条件"></textarea>
                                    </form>
                                </div>
                                <div class="col-lg-3 col-md3 col-sm-3 col-xs-3">
                                    <span id="msg6"> </span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <span>导入记录数：</span>
                                </div>
                                <div
                                        class="col-lg-2 col-md-2 col-sm-2 col-xs-2 form-group form-group-xs">
                                    <span id="updateRow"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--页码块-->
            <footer class="footer">
                <form role="form">
                    <div class="form-group">
                        <button type="button" id="runFullSql" class="btn btn-yellow">开始导入</button>
                        <button type="button" class="btn btn-default" id="runRefresh" onclick="refreshImport()">刷新
                        </button>
                        <button type="button" class="btn btn-default" id="stopRefresh">停止刷新</button>
                    </div>
                </form>
            </footer>
        </div>
    </div>
    <div class="copyright">
        <p>上海智树信息科技有限公司版权所有</p>
    </div>
</div>
<script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(function () {
        $(".meun-item").click(function () {
            $(".meun-item").removeClass("meun-item-active");
            $(this).addClass("meun-item-active");
            var itmeObj = $(".meun-item").find("img");
            itmeObj.each(function () {
                var items = $(this).attr("src");
                items = items.replace("_grey.png", ".png");
                items = items.replace(".png", "_grey.png")
                $(this).attr("src", items);
            });
            var attrObj = $(this).find("img").attr("src");
            ;
            attrObj = attrObj.replace("_grey.png", ".png");
            $(this).find("img").attr("src", attrObj);
        });


        var intervalId;

        $("#runFullSql")
                .click(
                function () {
                    if ($("#zkHosts").val() == "") {
                        $("#msg1").text("Zookeeper信息不能为空！");
                        $("#msg1").css("color", "red");

                    } else if ($("#collectionName").val() == "") {
                        $("#msg2").text("索引名称不能为空！");
                        $("#msg2").css("color", "red");
                    } else if ($("#configName").val() == "") {
                        $("#msg3").text("configName不能为空！");
                        $("#msg3").css("color", "red");

                    } else if ($("#sql").val() == "") {
                        $("#msg6").val("sql不能为空！");
                        $("#msg6").css("color", "red");
                    } else {
                        $("#msg1,#msg2,#msg3,#msg6").remove();
                    }

                    var sql = document.getElementById("sql").value;
                    var zkHosts = document
                            .getElementById("zkHosts").value;
                    var configName = document
                            .getElementById("configName").value;
                    var collectionName = document
                            .getElementById("collectionName").value;
                    var threadCount = document
                            .getElementById("threadCount").value;
                    var updateCol = document
                            .getElementById("updateCol").value;
                    var para = "sql=" + sql + "&zkHosts=" + zkHosts
                            + "&collectionName=" + collectionName
                            + "&configName=" + configName
                            + "&threadCount=" + threadCount
                            + "&updateCol=" + updateCol;
                    var url = "./solr/fullImport";
                    $.ajax({
                        type: "POST",
                        async: true,
                        data: para,
                        url: url,
                        success: function (data) {
                            $("#output").html(data);
                        },
                        error: function (data) {
                            $("#output").html(data);
                        }
                    })
                    intervalId = window.setInterval(
                            refreshImport, 1000);

                })

        $("#stopRefresh").click(function () {
            window.clearInterval(intervalId);
            intervalId = null;
        })
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })

    })
    var lastCount = 0;
    function refreshImport() {
        var url = "./solr/info";
        $.ajax({
            type: "POST",
            async: true,
            url: url,
            success: function (data) {
                var count = data;
                var avgCount = 0;
                if (!isNaN(count)) {
                    var delta = count - lastCount;
                    lastCount = count;
                    avgCount = parseInt(delta)
                }
                $("#updateRow").html(
                        "<font color='green'>"
                        + count + "导入速度：" + avgCount + "/s"
                        + "</font>");
            },
            error: function (data) {
                var count = data;
                var avgCount = 0;
                if (!isNaN(count)) {
                    var delta = count - lastCount;
                    lastCount = count;
                    avgCount = parseInt(delta)
                }
                $("#updateRow").html(
                        "<font color='green'>"
                        + count + "导入速度：" + avgCount + "/s"
                        + "</font>");
            }
        })
    }
</script>


</body>
</html>
